<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>4.认识一下VueComponent</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
	认识VueComponent:
			1.Person组件的本质是一个构造函数，名为VueComponent。

			2.VueComponent这个构造函数，不是程序员定义的，也不是引入了Vue就有的，而是Vue.extend()生成的。

			3.Vue.extend()每次生成的都是一个全新的VueComponent构造函数！！！（以后会很有用）

			4.我们只需要写<Person></Person>或<Person/> Vue就会帮我们执行： new VueComponent(options)。

			5.关于this的指向：
					(1).组件配置中（Vue.extend(options)）：
								data函数、methods中的函数、watch中的函数、computed中的函数、所有的生命周期函数、等等
								它们的this均是【VueComponent实例对象】——vc
					(2).new Vue(options)配置中：
								data函数、methods中的函数、watch中的函数、computed中的函数、所有的生命周期函数、等等
								它们的this均是【Vue实例对象】——vm
					备注：vc其实就是一个小型的vm，有点小区别，例如：vm可以拥有el，而vc不能拥有。

			6.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

			7.关于如下代码，请回答：	
						Vue有几个？—— 1个，引入而来。
						VueComponent有几个？—— 2个，因为定义了2个组件。
						vm有几个？—— 1个，因为new了一个Vue实例。
						vc有几个？—— 1+3，因为写了三次组件标签。
		-->
		<!-- 准备好一个容器-->
		<div id="demo"></div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			//定义（创建）一个Person组件
			const Person = Vue.extend({
				name:'Person',
				template:`
					<div>
						<h1>人员信息</h1>
						<h4>人的姓名：{{personName}}</h4>
						<h4>人的年龄：{{age}}</h4>
						<button @click="showPersonInfo">点我提示个人信息</button>	
					</div>
				`,
				data(){
					return{
						personName:'张三',
						age:18
					}
				},
				methods:{
					showPersonInfo(){
						alert(`我叫${this.personName}，我今年${this.age}岁了`)
						// console.log(this)
					}
				}
			})

			//定义（创建）一个App组件
			const App = Vue.extend({
				name:'App',
				components:{Person},
				template:`
					<div>
						<Person/>
						<Person/>
						<Person/>
					</div>
				`
			})

			//创建vm
			let vm = new Vue({
				el:'#demo',
				data:{
					qwe:1,
					asd:2
				},
				components:{App},
				template:'<App/>'
			})
			console.log(vm)
			
		</script>
	</body>
</html>